<template>
	<view>

		<view class="d-flex   border-bottom  border-top " style="height: 80upx;">
			<view class="   d-flex  flex-1   a-center   j-center  font-md" v-for='(item,index) in screen.list' @click="changeItem(index)">
				<text :class="index==screen.currentIndex?'main-text-color' :'' ">{{item.name}}</text>
				<view>
					<view class="iconfont icon-paixu-shengxu line-h0" :class="item.status==1?'main-text-color':'text-light-muted' ">
					</view>

					<view class="iconfont icon-paixu-jiangxu line-h0" :class="item.status===2?'main-text-color':'text-light-muted'">
					</view>
				</view>
			</view>

			<view class="   d-flex  flex-1   a-center   j-center  font-md" @click="showRigth = true">
				<text>筛选</text>
			</view>

		</view>

		<search-list v-for='(item,index) in  list' :key='index' :item='item' :index='index'> </search-list>


		<uni-drawer :visible="showRigth" :mode='right' @close='showRigth=false'>

			<!-- :headBorderBottom="false" :headTitleWeight="false" -->
			<card headTitle="服务">
				<!-- 单选按钮组 -->
				<!-- @change='changeRadio1'  @change='changeRadio2' -->
				<zcm-radio-group :label="label"   :selected.sync='label.selected' ></zcm-radio-group>
			</card>

			<view class="d-flex a-center j-center   font-md   position-fixed  bottom-0 left-0  w-100  border-top border-light-secondary">

				<view class="flex-1  d-flex a-center j-center     py-2 text-white main-bg-color" hover-class="main-bg-hover-color">确定</view>
				<view class="flex-1  d-flex a-center j-center      py-2 " hover-class="bg-light-secondary">重置</view>
			</view>





		</uni-drawer>
	</view>
</template>

<script>
	import searchLlist from '@/components/search-list/search-list.vue'


	import uniDrawer from "@/components/uni-ui/uni-drawer/uni-drawer.vue"

	import card from '@/components/common/card.vue'


	import zcmRadioGroup from "@/components/common/radio-group.vue"
	export default {
		components: {
			searchLlist,
			uniDrawer,
			card,
			zcmRadioGroup
		},
		data() {
			return {
				showRigth: false,
				right: "right",


				list: [{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					},
					{
						title: "真无限蓝牙耳机",
						titlepic: "/static/images/demo/demo6.jpg",
						desc: "雅致简约 / 分体式入耳 / 收纳盒充电 / 蓝牙5.0 / 触控操作",
						pprice: 100,
						comment_num: 1300,
						good_num: "98%"
					}
				],


				screen: {
					currentIndex: 0,
					list: [{
							name: "综合",
							status: 1
						},
						{
							name: "销量",
							status: 0
						},
						{
							name: "价格",
							status: 0
						},
					]
				},
				label: {
					selected: 0,
					list: [{
							name: "选项一"
						},
						{
							name: "选项二"
						},
						{
							name: "选项三"
						},
					]
				}

			}
		},
		methods: {

			changeItem(index) {
				//干掉之前高亮的图标 
				/*
				1   判断当前的  具体哪个是之前的高亮 找到之前高亮的那个元素
				2  如果当前点击的依然是之前那个高亮的元素   那么当前的高亮不移除  只是切换上下箭头的高亮颜色
				*/
				let oldIndex = this.screen.currentIndex;
				let oldItem = this.screen.list[oldIndex];
				if (oldIndex === index) {
					return oldItem.status = oldItem.status == 1 ? 2 : 1
				}

				//如果代码能够执行到这来 说明 现在点击的那个元素不是之前高亮的那一个
				/*
				1 清除之前高亮的   重新给最新的点击的元素加上高亮 
				*/
				oldItem.status = 0; //清掉之前的小图标高亮
				//切换高亮
				this.screen.currentIndex = index
				let newItem = this.screen.list[index];
				newItem.status = 1; // 点击的那个元素的小图标高亮




			},


			// changeRadio2(index) {
			// 	this.label.selected = index
			// }




		}
	}
</script>

<style>

</style>
